<template>
  <div id="app" style="overflow: hidden;">
    <my-head></my-head>
    <div style="width:100%;">
      <div class="menuleft">
        <my-tree></my-tree>
      </div>
      <transition name="faderight">
      <div class="nav-content main-content animated">
        <ul class="nav nav-tabs" role="tablist">
          <span class="nav-tabs-bar" title="展开" style="display:none" @click.stop="showTabs($event)"><i></i></span>
          <span class="tabclassall" title="" title="关闭选项卡">全部关闭</span>
          <li class="active home"><a href="#Index" role="tab" data-toggle="tab">首页</a></li>
        </ul>
        <div class="tab-content">
          <div class="shrinkMenu" title="隐藏侧边栏" @click.stop="shrink($event)"></div>
          <div role="tabpanel" class="tab-pane active" id="Index">
          </div>
          <router-view></router-view>
        </div>
      </div>
      </transition>
    </div>
  </div>
</template>

<script>
  import myHead from '../components/head.vue'
  import myTree from '../components/tree.vue'
  export default {
    name: 'app',
    data(){
        return {
          show:true,
          showTab:true
        }
    },
    components:{
      myHead,
      myTree
    },
    methods:{
      shrink(e){
        if(!this.show){
          $(e.target).attr("title","隐藏侧边栏");
          $(e.target).removeClass("icon");
          $(".main-content").animate({
              left:"200px"
          });
          $(".menuleft").animate({
            left:"0px"
          });
          this.show = true;
        }else{
          $(e.target).attr("title","显示侧边栏");
          $(e.target).addClass("icon");
          $(".main-content").animate({
            left:"0px"
          });
          $(".menuleft").animate({
            left:"-200px"
          });
          this.show = false;
        }
      },
      showTabs(e){
          if(this.showTab){
            $(e.target).attr("title","收缩");
            this.showTab = false;
          }else{
            $(e.target).attr("title","展开");
            this.showTab = true;
          }

      }
    }
  }
</script>

<style>
  @import "../utils/bootstrap/css/bootstrap.min.css";
  @import "../css/tree.css";
  .shrinkMenu{
    width:50px;height:50px;
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 4;
    cursor:pointer;
    background:#ccc url("../images/y_leftmenu_tip.png") center center no-repeat;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;}
  .shrinkMenu.icon{
    transform:rotate(180deg);
  }
</style>
